{% extends 'layout.html' %}

{% block content %}
{% load static %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">柱状图</div>
            <div class="panel-body">
                <div id="main" style="width: 600px;height: 400px"></div>

            </div>
        </div>
    </div>
{% endblock %}

{% block js %}

    <script>
        $(function () {
            initBar()

        })
        //var myChart = echarts.init(document.getElementById('m1'));
        function initBar() {
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '第一个 ECharts 实例'
                },
                tooltip: {},
                legend: {
                    data:[]
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: []
            };
             $.ajax({
                 url:"/app/charts/bar/",
                 type:"get",
                 dataType:"JSON",
                 success:function (res) {
                     console.log(res)
                     if(res.status){
                         option.legend.data = res.data.legend;
                         option.xAxis.data = res.data.x_axis;
                         option.series = res.data.series_list;

                         console.log("6546",option)

                         // 使用指定的配置项和数据显示图表
                         setTimeout(function (){
                           myChart.setOption(option);
                         }, 1000);
                         //myChart.setOption(option);
                     }

                 }
             })


             // 指定图表的配置和数据

        }
    </script>
{% endblock %}